<template>
	<div>
		<el-dialog v-model="formVisible" :title="formTitle" width="80%" destroy-on-close :fullscreen='false'>
			<el-form class="formModel_form" ref="formRef" :model="form" label-width="$template2.back.add.form.base.labelWidth" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="工号" prop="gonghao">
							<el-input class="list_inp" v-model="form.gonghao" placeholder="工号"
								type="text" :readonly="!isAdd||disabledForm.gonghao?true:false" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="密码" prop="mima">
							<el-input class="list_inp" v-model="form.mima" placeholder="密码"
								type="password" :readonly="!isAdd||disabledForm.mima?true:false" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="教师姓名" prop="laoshixingming">
							<el-input class="list_inp" v-model="form.laoshixingming" placeholder="教师姓名"
								 type="text" :readonly="!isAdd||disabledForm.laoshixingming?true:false" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="头像" prop="touxiang">
							<uploads
								:disabled="!isAdd||disabledForm.touxiang?true:false"
								action="file/upload" 
								tip="请上传头像" 
								:limit="3" 
								style="width: 100%;text-align: left;"
								:fileUrls="form.touxiang?form.touxiang:''" 
								@change="touxiangUploadSuccess">
							</uploads>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="xingbie">
							<el-select
								class="list_sel"
								:disabled="!isAdd||disabledForm.xingbie?true:false"
								v-model="form.xingbie" 
								placeholder="请选择性别"
								>
								<el-option v-for="(item,index) in xingbieLists" :label="item"
									:value="item"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号" prop="mobile">
							<el-input class="list_inp" v-model="form.mobile" placeholder="手机号"
								 type="text" :readonly="!isAdd||disabledForm.mobile?true:false" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所属班级" prop="banji">
							<el-select
								class="list_sel"
								:disabled="!isAdd||disabledForm.banji?true:false"
								v-model="form.banji" 
								placeholder="请选择班级"
								>
								<el-option v-for="(item,index) in banjiOptions" :label="item.banjimingcheng"
									:value="item.banjimingcheng"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer v-if="isAdd||type=='logistics'||type=='reply'">
				<span class="formModel_btn_box">
					<el-button class="formModel_cancel" @click="closeClick">取消</el-button>
					<el-button class="formModel_confirm" type="primary" @click="save"
						>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		computed,
		defineEmits
	} from 'vue'
	const context = getCurrentInstance()?.appContext.config.globalProperties;	
	const emit = defineEmits(['formModelChange'])
	//基础信息
	const tableName = 'laoshi'
	const formName = '教师'
	//基础信息
	//form表单
	const form = ref({})
	const disabledForm = ref({
		gonghao: false,
		mima: false,
		laoshixingming: false,
		touxiang: false,
		xingbie: false,
		mobile: false,
		banji: false
	})
	const formVisible = ref(false)
	const isAdd = ref(false)
	const formTitle = ref('')
	//表单验证
	//匹配手机号码
	const validateMobile = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isMobile(value)) {
			callback(new Error("请输入正确的手机号码"));
		} else {
			callback();
		}
	}
	const rules = ref({
		gonghao: [
			{required: true,message: '请输入工号',trigger: 'blur'}, 
		],
		mima: [
			{required: true,message: '请输入密码',trigger: 'blur'}, 
		],
		laoshixingming: [
			{required: true,message: '请输入教师姓名',trigger: 'blur'}, 
		],
		touxiang: [
		],
		xingbie: [
		],
		mobile: [
			{ validator: validateMobile, trigger: 'blur' },
		],
		banji: [
			{required: true,message: '请选择班级',trigger: 'change'}, 
		],
	})
	//表单验证
	
	const formRef = ref(null)
	const id = ref(0)
	const type = ref('')
	//头像上传回调
	const touxiangUploadSuccess=(e)=>{
		form.value.touxiang = e
	}
	//性别列表
	const xingbieLists = ref(['男', '女'])
	//班级列表
	const banjiOptions = ref([])
	//methods

	//获取唯一标识
	const getUUID =()=> {
      return new Date().getTime();
    }
	//重置
	const resetForm = () => {
		form.value = {
			gonghao: '',
			mima: '',
			laoshixingming: '',
			touxiang: '',
			xingbie: '男',
			mobile: '',
			banji: ''
		}
	}
	//获取info
	const getInfo = ()=>{
		context?.$http({
			url: `${tableName}/info/${id.value}`,
			method: 'get'
		}).then(res => {
			let reg=new RegExp('../../../file','g')
			form.value = res.data.data
			formVisible.value = true
		})
	}
	//获取班级列表
	const getBanjiList = () => {
		context?.$http({
			url: '/banji/list',
			method: 'get',
			params: {
				'page': 1,
				'limit': 100
			}
		}).then(res => {
            console.log(res)
            console.log(res.data.code)
			if (res.data.code === 0) {
				banjiOptions.value = res.data.page.list
			}
		})
	}
	//初始化
	const init=(formId=null,formType='add',formNames='',row=null,table=null,statusColumnName=null,tips=null,statusColumnValue=null)=>{
		resetForm()
		if(formId){
			id.value = formId
			type.value = formType
		}
		if(formType == 'add'){
			isAdd.value = true
			formTitle.value = '新增' + formName
			formVisible.value = true
			getBanjiList()
		}else if(formType == 'info'){
			isAdd.value = false
			formTitle.value = '查看' + formName
			getInfo()
		}else if(formType == 'edit'){
			isAdd.value = true
			formTitle.value = '修改' + formName
			getInfo()
			getBanjiList()
		}
	}
	//关闭
	const closeClick = () => {
		formVisible.value = false
	}
	//保存
	const save = () => {
		formRef.value.validate((valid) => {
			if (valid) {
				context?.$http({
					url: `${tableName}/${!id.value ? 'save' : 'update'}`,
					method: 'post',
					data: form.value
				}).then(res => {
					if (res.data.code === 0) {
						context?.$toolUtil.message('操作成功', 'success', () => {
							formVisible.value = false
							emit('formModelChange')
						})
					} else {
						context?.$toolUtil.message(res.data.msg, 'error')
					}
				})
			}
		})
	}
	//暴露方法
	defineExpose({
		init
	})
</script>
<style lang="scss" scoped>
.formModel_form {
	.formModel_btn_box {
		display: flex;
		justify-content: center;
		align-items: center;
		.formModel_cancel {
			margin-right: 10px;
		}
	}
}
</style> 